<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<body>
<header th:fragment="header">
    <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <a href="/" class="layui-hide-xs" style="font-weight: bold;">
        <div  class="layui-logo">通用数据列表 </div>
        </a>
	    <ul class="layui-nav layui-layout-right">
	      <li class="layui-nav-item"><a href="">Hello [[${#httpServletRequest.remoteUser}]]!</a></li>
	        <li class="layui-nav-item">
				<form th:action="@{/logout}" method="post">
				    <input type="submit" class="layui-btn" value="注销"/>
				</form>
	        </li>
        </ul>
    </div>
    
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
    <ul class='layui-nav layui-nav-tree' lay-filter='test'>
    <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-rate layui-bg-red"></i>系统管理<span class="layui-nav-more"></span></a><dl class="layui-nav-child"><dd><a name="menu" href=""> 生成列表</a></dd><dd><a name="menu" href=""> 用户管理</a></dd></dl></li>
    </ul>
    </div>
  </div>
    </div>
<script th:inline="javascript">
	/*<![CDATA[*/

layui.use(['element','layer'], function() {
	var $ = layui.jquery,
		layer = layui.layer,
		element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
	var tabtitle = null;
	var tab = null;
    $.get("/json/menus.json",function(data){
        if(data!=null){
            getMenus(data);
            element.render('nav');
        }else{
            layer.alert("权限不足，请联系管理员",function () {
                //退出
                window.location.href="/logout";
            });
        }
    });

	var getMenus=function(data){
	    //回显选中
//	    var ul=$("<ul class='layui-nav layui-nav-tree' lay-filter='test'></ul>");
	    var ul=$(".layui-nav-tree")
    	console.info(data);
	    for(var i=0;i < data.length;i++){
	        var node=data[i];
            var li=$("<li class='layui-nav-item'></li>");
            //获取子节点
            var childArry = node.children;
            if(childArry!= null && childArry.length>0){
             //父级无page
	             var a=$("<a href=\"javascript:;\"><i class='layui-icon "+node.icon+"'></i>"+node.name+"</a>");
	             li.append(a);
                a.append("<span class='layui-nav-more'></span>");
                var dl=$("<dl class='layui-nav-child'></dl>");
                getChildMenus(dl,childArry,1);
                li.append(dl);
            } else {
				a=$("<a name='menu' href='"+node.page+"'>"+node.name+"</a>");
				li.append(a);
            }
            ul.append(li);
	    }
//	    $(".layui-side-scroll").append(ul);
	};

	function getChildMenus(parent , data , level){
		for(var i=0;i < data.length;i++){
			var node = data[i];
			var dd=$("<dd></dd>");
			var nodename="&emsp;";
			nodename = nodename.repeat(level);
			nodename = nodename + node.name;
	        var childArry = node.children;
	        var a ;
	        if(childArry!= null && childArry.length>0){
				a=$("<a href=\"javascript:;\">"+nodename+"</a>");
				dd.append(a);
	            a.append("<span class='layui-nav-more'></span>");
	            var dl=$("<dl class='layui-nav-child'></dl>");
	            getChildMenus(dl,childArry,level+1);
	            dd.append(dl);
	        }else{
				a=$("<a name='menu' href='"+node.page+"'>"+nodename+"</a>");
				dd.append(a);
	        }
			parent.append(dd);
		}
	};
});
/*]]>*/
</script>
</header>

</body>
</html>